<template>
  <view class="container">
<!--    <view class="nav-bar">
      <view class="left" @click="goBack">
        <u-icon name="arrow-left" size="40" color="#333"></u-icon>
      </view>
      <view class="title">健康问卷</view>
      <view class="left"></view>
    </view> -->

    <scroll-view scroll-y class="content">
      <view class="question-item" v-for="(q, index) in questions" :key="index">
        <view class="question-title">{{ index + 1 }}. {{ q.title }}</view>
		<view class="question-note" v-if="q.note">{{ q.note }}</view>

        <!-- 文本输入 -->
        <input v-if="q.type === 'input'" class="input-box" type="text" v-model="answers[q.key]" placeholder="请输入" />

        <!-- 单选按钮 -->
        <view class="options" v-if="q.type === 'radio'">
          <view class="option"
            v-for="opt in q.options" 
            :key="opt" 
            :class="{ selected: answers[q.key] === opt }"
            @click="toggleRadio(q.key, opt)">
            <view class="radio">
              <view class="inner" v-if="answers[q.key] === opt"></view>
            </view>
            <text class="option-text">{{ opt }}</text>
          </view>
        </view>

        <!-- 复合输入 -->
        <view v-if="q.type === 'composite'">
          <view class="sub-input">
            <input
              class="input-box"
              type="text"
              :value="answers[q.key + '_value']"
              :disabled="answers[q.key] === '不知道'"
              placeholder="请输入"
              @input="onCompositeInput(q.key, $event.detail.value)" />

            <view
              class="option"
              :class="{ selected: answers[q.key] === '不知道' }"
              @click="toggleUnknown(q.key)">
              <view class="radio">
                <view class="inner" v-if="answers[q.key] === '不知道'"></view>
              </view>
              <text class="option-text">我不知道</text>
            </view>
          </view>
        </view>
      </view>
      <view class="submit-button" @click="submitForm">
        <text>提交问卷</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import { submitQrAnswer } from '@/common/api.js'
export default {
  data() {
    return {
      answers: {},
      questions: [
        { key: 'age', title: '您多大年龄（岁）', type: 'input' },
        { key: 'gender', title: '您的性别', type: 'radio', options: ['男', '女'] },
        { key: 'height', title: '您的身高(cm)', type: 'composite', unit: 'cm' },
        { key: 'weight', title: '您的体重(kg)', type: 'composite', unit: 'kg' },
        { key: 'smoke', title: '目前（或曾经）吸烟吗？', type: 'radio', options: ['是', '否'] },
        { key: 'alcohol', title: '您每天饮酒的酒精量会超过10g吗？（约相当于1听330毫升啤酒）', type: 'radio', options: ['是', '否'] },
        { key: 'fruitVegetableOver6', title: '您每天食用水果和蔬菜的种类至少有6种吗？', type: 'radio', options: ['是', '否'] },
        { key: 'exercise', title: '您每周至少进行2小时30分钟的体育锻炼吗？', type: 'radio', options: ['是', '否'] },
        { key: 'pressure', title: '在过去的一年，您是否曾有过巨大的精神或情感压力？', type: 'radio', options: ['是', '否'] },
        { key: 'parentDisease', title: '您的母亲/父亲在65岁之前是否有过中风或心脏病发作？', type: 'radio', options: ['是', '否'] },
        { key: 'sbp', title: '您的收缩压（血压度数中的高值）是多少？（单位mmHg）', type: 'composite', unit: 'mmHg' },
        { key: 'medication', title: '您正在服用降压药吗？', type: 'radio', options: ['是', '否'] },
        { key: 'diabetes', title: '您曾被医生诊断为糖尿病吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'] },
        { key: 'heartDisease', title: '您曾被医生诊断患有心血管/外周血管疾病吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'], note: '心血管疾病如冠心病、心绞痛、心肌梗死、心律失常、心衰等；外周血管疾病如颈动脉狭窄、颈部椎动脉狭窄、四肢动脉狭窄等' },
        { key: 'leftVentricularHypertrophy', title: '您曾被医生诊断为左心室肥厚吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'] },
        { key: 'atrialFibrillation', title: '您曾被医生诊断为房颤吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'] },
        { key: 'cognitionProblem', title: '您曾被医生告知具有认知问题或患有老年痴呆症吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'] },
        { key: 'poorMemory', title: '您或您周围的人认为您记忆力差吗？', type: 'radio', options: ['是', '否'] },
        { key: 'brainDamage', title: '您曾被医生诊断为创伤性脑损伤吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'] , note: '创伤性脑损伤多为交通事故、跌倒、坠落等意外而直接或间接作用导致头部致伤'},
        { key: 'stroke', title: '您曾被医生诊断为中风或短暂性脑缺血发作（小中风）吗？', type: 'radio', options: ['是的，一年前', '是的，一年内', '没有'],note: '小中风属于短暂性脑缺血，症状主要有短暂性身体某侧肢体麻木或者乏力，短暂性语言不利或找不到正确词语表达，短暂性单眼或双眼视物不清或视物重影，短暂性行走困难或平衡失调，短暂性头晕、头痛。上述症状往往几分钟后就会消失，持续时间最多也不超过24小时' }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
	async submitForm() {
	  // 1. 校验是否每题都有答案
	  const unanswered = this.questions.filter(q => {
		if (q.type === 'input' || q.type === 'radio') {
		  return !this.answers[q.key]; // 没填值
		} else if (q.type === 'composite') {
		  return !this.answers[q.key] && !this.answers[q.key + '_value'];
		}
		return true; // 默认未答
	  });

	  if (unanswered.length > 0) {
		uni.showToast({
		  title: '请完成所有题目再提交',
		  icon: 'none'
		});
		return;
	  }

	  // 2. 构造提交数据（字段名保持和 key 一致）
	  const data = {};
	  this.questions.forEach(q => {
		if (q.type === 'composite') {
		  data[q.key] = this.answers[q.key] === '不知道'
			? '不知道'
			: this.answers[q.key + '_value'] || '';
		} else {
		  data[q.key] = this.answers[q.key];
		}
	  });

	  // 3. 提交
	  try {
		await submitQrAnswer(data); 
		uni.showToast({
		  title: '提交成功',
		  icon: 'success'
		});
		setTimeout(() => {
		  uni.navigateBack();
		}, 1500);
	  } catch (e) {
		uni.showToast({
		  title: e.message || '提交失败',
		  icon: 'none'
		});
	  }
	},
	// 支持单选点击取消
	  toggleRadio(key, option) {
		this.answers[key] = (this.answers[key] === option) ? '' : option
	  },

	  // “我不知道”点击逻辑
	  toggleUnknown(key) {
		if (this.answers[key] === '不知道') {
		  this.answers[key] = ''
		} else {
		  this.answers[key] = '不知道'
		  this.answers[key + '_value'] = ''
		}
	  },

	  // 监听输入框变化，如果有输入就清除“我不知道”
	  onCompositeInput(key, value) {
		this.answers[key + '_value'] = value
		if (value && this.answers[key] === '不知道') {
		  this.answers[key] = ''
		}
	  }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;

  .left {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.content {
  flex: 1;
  padding: 30rpx;
}

.question-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .question-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  .question-note {
    font-size: 24rpx;
    color: #999;
    margin: 10rpx 0 20rpx;
    line-height: 1.4;
  }

  .input-box {
    border: 1px solid #ccc;
    border-radius: 8rpx;
    padding: 10rpx;
    font-size: 37rpx;
    width: 82%;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .option {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-radius: 8rpx;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all 0.3s;
	max-width: 80%; 

    &.selected {
      border-color: #2979ff;
      background-color: #e8f2ff;
    }

    .radio {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;

      .inner {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #2979ff;
      }
    }

    .option-text {
      font-size: 28rpx;
      color: #333;
    }
  }

  .sub-input {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }
}

.submit-button {
  background-color: #2979ff;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0;
  max-width: 90%;

  text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}
</style>
